<template>
	<view class="analysis-detail-container">
		<!-- 头部信息 -->
		<view class="header-section">
			<view class="video-info">
				<uni-icons type="videocam" size="32" color="#667eea"></uni-icons>
				<view class="info-content">
					<text class="sport-type">{{ getSportTypeName(analysisResult.sportType) }}</text>
					<text class="video-name">{{ analysisResult.videoFileName }}</text>
				</view>
			</view>
			<view class="status-badge" :class="getStatusClass(analysisResult.status)">
				<text class="status-text">{{ getStatusText(analysisResult.status) }}</text>
			</view>
		</view>

		<!-- 分析摘要 -->
		<view class="summary-section" v-if="analysisResult.summary">
			<text class="section-title">分析摘要</text>
			<view class="summary-content">
				<text class="summary-text">{{ analysisResult.summary }}</text>
			</view>
		</view>

		<!-- 智能视频播放器 -->
		<view class="video-section" v-if="analysisResult.status === 'COMPLETED'">
			<text class="section-title">智能分析视频</text>
			
			<!-- 视频播放器容器 -->
			<view class="video-player-container">
				<!-- 视频元素 -->
				<view class="video-wrapper">
					<video 
						id="videoElement"
						ref="videoElement"
						:src="videoUrl" 
						controls 
						:poster="videoPoster"
						@error="onVideoError"
						@loadstart="onVideoLoadStart"
						@canplay="onVideoCanPlay"
						@loadedmetadata="onVideoLoadedMetadata"
						@timeupdate="onVideoTimeUpdate"
						@play="onVideoPlay"
						@pause="onVideoPause"
						@ratechange="onVideoRateChange">
					</video>
				</view>
				
				<!-- 播放器状态信息 -->
				<view class="player-info" v-if="playerData && playerData.status === 'SUCCESS'">
					<view class="info-row">
						<text class="info-item">{{ formatTime(currentTime) }} / {{ formatTime(videoDuration) }}</text>
						<text class="info-item">{{ paused ? '暂停' : '播放中' }}</text>
						<text class="info-item">{{ playbackRate }}x</text>
					</view>
				</view>
				
				<!-- 智能时间轴 -->
				<view class="timeline-container" v-if="playerData && playerData.timeline">
					<view class="timeline-header">
						<text class="timeline-title">智能分析时间轴</text>
						<text class="timeline-stats" v-if="playerData.statistics">
							{{ playerData.statistics.totalInstructions }}个指令 | {{ playerData.statistics.keyAnalysisPoints }}个关键点
						</text>
					</view>
					
					<!-- 时间轴主体 -->
					<view class="timeline-track">
						<!-- 进度条背景 -->
						<view class="timeline-progress-bg" @click="onTimelineClick">
							<!-- 当前播放进度 -->
							<view class="timeline-progress" :style="{ width: timelineProgressWidth }"></view>
							
							<!-- 指令标记点 -->
							<view class="timeline-markers">
								<!-- 播放指令标记 -->
								<view 
									v-for="instruction in playerData.instructions" 
									:key="`instruction-${instruction.timestamp}`"
									class="timeline-marker"
									:class="`marker-${instruction.type.toLowerCase()}`"
									:style="{ left: getTimelinePosition(instruction.timestamp) }"
									@click.stop="jumpToTime(instruction.timestamp)">
									<view class="marker-tooltip">
										<text class="tooltip-time">{{ formatTime(instruction.timestamp) }}</text>
										<text class="tooltip-type">{{ getInstructionTypeText(instruction.type) }}</text>
										<text class="tooltip-desc">{{ instruction.title || instruction.description }}</text>
									</view>
								</view>
								
								<!-- 分析要点标记 -->
								<view 
									v-for="point in playerData.analysisPoints" 
									:key="`point-${point.timestamp}`"
									class="timeline-marker marker-analysis-point"
									:style="{ left: getTimelinePosition(point.timestamp) }"
									@click.stop="jumpToTime(point.timestamp)">
									<view class="marker-tooltip">
										<text class="tooltip-time">{{ formatTime(point.timestamp) }}</text>
										<text class="tooltip-type">{{ point.title }}</text>
										<text class="tooltip-desc">{{ point.content }}</text>
									</view>
								</view>
								
								<!-- 高亮片段标记 -->
								<view 
									v-for="highlight in playerData.highlights" 
									:key="`highlight-${highlight.timestamp}`"
									class="timeline-marker marker-highlight"
									:style="{ left: getTimelinePosition(highlight.segmentStartTime || highlight.timestamp) }"
									@click.stop="jumpToTime(highlight.segmentStartTime || highlight.timestamp)">
									<view class="marker-tooltip">
										<text class="tooltip-time">{{ formatTime(highlight.segmentStartTime || highlight.timestamp) }}</text>
										<text class="tooltip-type">重点片段</text>
										<text class="tooltip-desc">{{ highlight.title }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- YOMI智能建议 -->
		<view class="ai-conversation-section">
			<view class="conversation-header">
				<text class="conversation-title">
					<uni-icons type="chat-filled" size="18" color="#667eea"></uni-icons>
					YOMI智能建议
					<text class="message-count" v-if="conversationMessages.length > 0">({{ conversationMessages.length }})</text>
					<text class="conversation-status" v-if="conversationId">✓</text>
				</text>
				<button class="full-chat-btn" @click="goToFullChat">
					<text class="full-chat-text">完整对话</text>
					<uni-icons type="right" size="12" color="#667eea"></uni-icons>
				</button>
			</view>
			<view class="conversation-container">
				<!-- 调试信息 -->
				<view class="debug-info" style="font-size: 12px; color: #999; margin-bottom: 8px; padding: 8px; background: #f9f9f9; border-radius: 4px;">
					<text>消息数量: {{ conversationMessages.length }}</text>
					<text v-if="conversationId"> | 会话ID: {{ conversationId.substring(0, 8) }}...</text>
					<text v-if="conversationMessages.length > 0"> | 最新消息: {{ conversationMessages[conversationMessages.length - 1]?.senderType }}</text>
				</view>
				
				<view class="conversation-messages">					
					<view class="message-item" v-for="(message, index) in conversationMessages" :key="index" :class="['message', getMessageClass(message?.senderType)]" v-if="message">
						<view class="message-avatar" v-if="isAIMessage(message?.senderType)">
							<uni-icons type="robot" size="14" color="#667eea"></uni-icons>
						</view>
						<view class="message-content">
							<text class="message-text">{{ message?.content || '' }}</text>
							<text class="message-time">{{ formatChatTime(message?.timestamp) }}</text>
						</view>
					</view>
					<view class="typing-indicator" v-if="isConversationTyping">
						<view class="typing-dots">
							<view class="dot"></view>
							<view class="dot"></view>
							<view class="dot"></view>
						</view>
					</view>
				</view>
				<view class="conversation-input-container">
					<input 
						class="conversation-input" 
						v-model="conversationInput" 
						placeholder="询问关于这次分析的问题..."
						@confirm="sendConversationMessage"
					/>
					<button class="send-button" @click="sendConversationMessage" :disabled="!conversationInput.trim() || isConversationTyping">
						<uni-icons type="paperplane" size="14" color="#fff"></uni-icons>
					</button>
				</view>
			</view>
		</view>

		<!-- AI智能建议（可收起） -->
		<view class="suggestions-section" v-if="suggestions && suggestions.length > 0">
			<view class="section-header" @click="toggleSection('suggestions')">
				<view class="header-left">
					<uni-icons type="lightbulb" size="20" color="#667eea"></uni-icons>
					<text class="section-title">AI智能建议</text>
				</view>
				<view class="header-right">
					<uni-icons :type="collapsedSections.suggestions ? 'down' : 'up'" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<view class="suggestions-container" v-show="!collapsedSections.suggestions">
				<view class="suggestion-item" v-for="(suggestion, index) in suggestions" :key="index" :class="'suggestion-' + (suggestion?.type || 'general')">
					<view class="suggestion-header">
						<view class="suggestion-icon" :class="getSuggestionIconClass(suggestion?.type)">
							<uni-icons :type="getSuggestionIcon(suggestion?.type)" size="18" color="#fff"></uni-icons>
						</view>
						<view class="suggestion-title-area">
							<text class="suggestion-type">{{ getSuggestionTypeText(suggestion?.type) }}</text>
							<view class="suggestion-priority" v-if="suggestion.priority" :class="getPriorityClass(suggestion.priority)">
								{{ getPriorityText(suggestion.priority) }}
							</view>
						</view>
					</view>
					
					<!-- 建议内容 -->
					<view class="suggestion-content">
						<text class="suggestion-text">{{ suggestion.content || suggestion.text || suggestion }}</text>
						
						<!-- 问题描述 -->
						<view class="suggestion-issue" v-if="suggestion.issue">
							<text class="issue-label">发现问题：</text>
							<text class="issue-text">{{ suggestion.issue }}</text>
						</view>
						
						<!-- 预期改善效果 -->
						<view class="suggestion-improvement" v-if="suggestion.expectedImprovement">
							<text class="improvement-label">预期效果：</text>
							<text class="improvement-text">{{ suggestion.expectedImprovement }}</text>
						</view>
						
						<!-- 训练详情 -->
						<view class="drill-details" v-if="suggestion.type === 'drill'">
							<view class="drill-info" v-if="suggestion.sets || suggestion.reps || suggestion.frequency">
								<view class="drill-item" v-if="suggestion.sets">
									<text class="drill-label">组数：</text>
									<text class="drill-value">{{ suggestion.sets }}组</text>
								</view>
								<view class="drill-item" v-if="suggestion.reps">
									<text class="drill-label">次数：</text>
									<text class="drill-value">{{ suggestion.reps }}次</text>
								</view>
								<view class="drill-item" v-if="suggestion.frequency">
									<text class="drill-label">频率：</text>
									<text class="drill-value">{{ suggestion.frequency }}</text>
								</view>
							</view>
							<view class="target-area" v-if="suggestion.targetArea">
								<text class="target-label">针对部位：</text>
								<text class="target-text">{{ suggestion.targetArea }}</text>
							</view>
						</view>
						
						<!-- 渐进式调整步骤 -->
						<view class="adjustment-steps" v-if="suggestion.steps && suggestion.steps.length > 0">
							<text class="steps-label">调整步骤：</text>
							<view class="step-item" v-for="(step, stepIndex) in suggestion.steps" :key="stepIndex">
								<text class="step-text">{{ step }}</text>
							</view>
						</view>
						
						<!-- 时间框架 -->
						<view class="timeframe" v-if="suggestion.timeframe">
							<text class="timeframe-label">建议时长：</text>
							<text class="timeframe-text">{{ suggestion.timeframe }}</text>
						</view>
					</view>
					
					<view class="suggestion-footer" v-if="suggestion.timestamp || suggestion.bodyPart || suggestion.title">
						<text class="suggestion-meta" v-if="suggestion.title && suggestion.title !== suggestion.content">
							{{ suggestion.title }}
						</text>
						<text class="suggestion-meta" v-if="suggestion.timestamp">
							时间点: {{ formatTime(suggestion.timestamp) }}
						</text>
						<text class="suggestion-meta" v-if="suggestion.bodyPart">
							部位: {{ suggestion.bodyPart }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 详细分析结果（可收起） -->
		<view class="detailed-analysis-section" v-if="detailedAnalysis">
			<view class="section-header" @click="toggleSection('detailedAnalysis')">
				<view class="header-left">
					<uni-icons type="bars" size="20" color="#667eea"></uni-icons>
					<text class="section-title">专业运动分析结果</text>
				</view>
				<view class="header-right">
					<uni-icons :type="collapsedSections.detailedAnalysis ? 'down' : 'up'" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<view class="analysis-container" v-show="!collapsedSections.detailedAnalysis">
				<!-- 整体评估 -->
				<view class="analysis-score" v-if="detailedAnalysis.overallAssessment">
					<view class="score-circle">
						<text class="score-value">{{ detailedAnalysis.overallAssessment.totalScore }}</text>
						<text class="score-label">总分</text>
					</view>
					<view class="score-description">
						<text class="score-desc-text">{{ detailedAnalysis.overallAssessment.grade || getScoreDescription(detailedAnalysis.overallAssessment.totalScore) }}</text>
						<text class="efficiency-text" v-if="detailedAnalysis.overallAssessment.efficiencyRating">
							效率评级: {{ detailedAnalysis.overallAssessment.efficiencyRating }}分
						</text>
						<text class="risk-text" :class="getRiskClass(detailedAnalysis.overallAssessment.injuryRiskLevel)">
							受伤风险: {{ detailedAnalysis.overallAssessment.injuryRiskLevel }}
						</text>
					</view>
				</view>

				<!-- 优势与不足 -->
				<view class="strengths-weaknesses" v-if="detailedAnalysis.overallAssessment">
					<view class="strengths" v-if="detailedAnalysis.overallAssessment.strengthPoints">
						<text class="section-subtitle">动作优势</text>
						<view class="strength-item" v-for="(strength, index) in detailedAnalysis.overallAssessment.strengthPoints" :key="index">
							<uni-icons type="checkmarkempty" size="14" color="#52c41a"></uni-icons>
							<text class="strength-text">{{ strength }}</text>
						</view>
					</view>
					<view class="weaknesses" v-if="detailedAnalysis.overallAssessment.weaknessPoints">
						<text class="section-subtitle">需要改进</text>
						<view class="weakness-item" v-for="(weakness, index) in detailedAnalysis.overallAssessment.weaknessPoints" :key="index">
							<uni-icons type="closeempty" size="14" color="#ff4d4f"></uni-icons>
							<text class="weakness-text">{{ weakness }}</text>
						</view>
					</view>
				</view>

				<!-- 运动阶段分析 -->
				<view class="movement-phases" v-if="detailedAnalysis.movementPhases">
					<text class="section-subtitle">运动阶段分析</text>
					<view class="phase-item" v-for="(phase, index) in detailedAnalysis.movementPhases" :key="index">
						<view class="phase-header">
							<text class="phase-name">{{ phase.phaseName }}</text>
							<view class="phase-score" :class="getPhaseScoreClass(phase.phaseScore)">
								{{ phase.phaseScore }}分
							</view>
						</view>
						<text class="phase-duration" v-if="phase.duration">
							持续时间: {{ phase.duration.toFixed(2) }}秒
						</text>
						<view class="phase-improvements" v-if="phase.keyActions">
							<view class="improvement-item" v-for="(action, actionIndex) in phase.keyActions" :key="actionIndex">
								<text class="improvement-text">{{ action.improvement }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 关节详细分析 -->
				<view class="joint-analysis" v-if="detailedAnalysis.jointDetailAnalysis">
					<text class="section-subtitle">关节详细分析</text>
					<view class="joint-item" v-for="(joint, index) in detailedAnalysis.jointDetailAnalysis" :key="index">
						<view class="joint-header">
							<text class="joint-name">{{ getJointDisplayName(joint.jointName) }}</text>
							<view class="risk-indicator" :class="getRiskFactorClass(joint.currentPerformance.riskFactor)">
								风险: {{ joint.currentPerformance.riskFactor.toFixed(1) }}
							</view>
						</view>
						<view class="joint-metrics">
							<view class="metric-row">
								<text class="metric-label">一致性:</text>
								<text class="metric-value">{{ joint.currentPerformance.consistency.toFixed(1) }}%</text>
							</view>
							<view class="metric-row">
								<text class="metric-label">流畅性:</text>
								<text class="metric-value">{{ joint.currentPerformance.smoothness.toFixed(1) }}%</text>
							</view>
							<view class="metric-row">
								<text class="metric-label">效率:</text>
								<text class="metric-value">{{ joint.currentPerformance.efficiency.toFixed(1) }}%</text>
							</view>
						</view>
						<view class="joint-advice" v-if="joint.specificAdvice && joint.specificAdvice.length > 0">
							<text class="advice-title">专业建议:</text>
							<text class="advice-item" v-for="(advice, adviceIndex) in joint.specificAdvice" :key="adviceIndex">
								{{ advice }}
							</text>
						</view>
					</view>
				</view>

				<!-- 生物力学分析 -->
				<view class="biomechanics" v-if="detailedAnalysis.biomechanicsAnalysis">
					<text class="section-subtitle">生物力学分析</text>
					<view class="biomech-item" v-if="detailedAnalysis.biomechanicsAnalysis.powerGeneration">
						<text class="biomech-title">力量生成</text>
						<view class="biomech-metrics">
							<text class="biomech-metric">峰值功率: {{ detailedAnalysis.biomechanicsAnalysis.powerGeneration.peakPower }}</text>
							<text class="biomech-metric">平均功率: {{ detailedAnalysis.biomechanicsAnalysis.powerGeneration.averagePower }}</text>
							<text class="biomech-metric">功率一致性: {{ detailedAnalysis.biomechanicsAnalysis.powerGeneration.powerConsistency }}%</text>
						</view>
					</view>
					<view class="biomech-item" v-if="detailedAnalysis.biomechanicsAnalysis.balanceStability">
						<text class="biomech-title">平衡稳定性</text>
						<view class="biomech-metrics">
							<text class="biomech-metric">侧向稳定性: {{ detailedAnalysis.biomechanicsAnalysis.balanceStability.lateralStability }}%</text>
							<text class="biomech-metric">前后稳定性: {{ detailedAnalysis.biomechanicsAnalysis.balanceStability.anteriorPosteriorStability }}%</text>
							<text class="biomech-metric">重心控制: {{ detailedAnalysis.biomechanicsAnalysis.balanceStability.centerOfMassControl }}%</text>
						</view>
					</view>
				</view>

				<!-- 训练计划 -->
				<view class="training-plan" v-if="detailedAnalysis.trainingPlan">
					<text class="section-subtitle">个性化训练计划</text>
					<view class="plan-goals" v-if="detailedAnalysis.trainingPlan.shortTermGoals">
						<text class="goals-title">短期目标</text>
						<text class="goal-item" v-for="(goal, index) in detailedAnalysis.trainingPlan.shortTermGoals" :key="index">
							• {{ goal }}
						</text>
					</view>
					<view class="plan-schedule" v-if="detailedAnalysis.trainingPlan.weeklySchedule">
						<text class="schedule-title">每周训练安排</text>
						<view class="schedule-item" v-for="(schedule, day) in detailedAnalysis.trainingPlan.weeklySchedule" :key="day">
							<text class="day-title">{{ day }}:</text>
							<text class="day-activities">{{ schedule.join(', ') }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		
		<!-- 高亮片段 -->
		<view class="highlights-section" v-if="playerData && playerData.highlights && playerData.highlights.length > 0">
			<text class="section-title">重点片段</text>
			<view class="highlights-grid">
				<view class="highlight-item" v-for="highlight in playerData.highlights" :key="highlight.timestamp" @click="jumpToTime(highlight.segmentStartTime || highlight.timestamp)">
					<view class="highlight-time">{{ formatTime(highlight.segmentStartTime || highlight.timestamp) }}</view>
					<view class="highlight-content">
						<text class="highlight-title">{{ highlight.title }}</text>
						<text class="highlight-desc">{{ highlight.description }}</text>
					</view>
					<view class="highlight-type">{{ getInstructionTypeText(highlight.type) }}</view>
				</view>
			</view>
		</view>
		
		<!-- 分析统计 -->
		<view class="stats-section" v-if="analysisStats || (playerData && playerData.statistics)">
			<text class="section-title">分析统计</text>
			<view class="stats-grid">
				<!-- 视频统计 -->
				<view class="stat-item" v-if="analysisStats">
					<text class="stat-value">{{ analysisStats.totalFrames || 0 }}</text>
					<text class="stat-label">总帧数</text>
				</view>
				<view class="stat-item" v-if="analysisStats">
					<text class="stat-value">{{ analysisStats.processedFrames || 0 }}</text>
					<text class="stat-label">已处理帧数</text>
				</view>
				<view class="stat-item" v-if="analysisStats">
					<text class="stat-value">{{ analysisStats.fps || 0 }}</text>
					<text class="stat-label">帧率</text>
				</view>
				<view class="stat-item" v-if="analysisStats">
					<text class="stat-value">{{ analysisStats.duration || '0s' }}</text>
					<text class="stat-label">视频时长</text>
				</view>
				
				<!-- 智能播放器统计 -->
				<template v-if="playerData && playerData.statistics">
					<view class="stat-item">
						<text class="stat-value">{{ playerData.statistics.totalInstructions }}</text>
						<text class="stat-label">播放指令</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ playerData.statistics.keyAnalysisPoints }}</text>
						<text class="stat-label">关键点</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ playerData.statistics.pauseInstructions }}</text>
						<text class="stat-label">暂停指令</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ playerData.statistics.explanations }}</text>
						<text class="stat-label">详细说明</text>
					</view>
				</template>
			</view>
		</view>

		<!-- 分析详情 -->
		<view class="details-section">
			<text class="section-title">分析详情</text>
			<view class="detail-cards">
				<view class="detail-card">
					<view class="card-header">
						<uni-icons type="calendar" size="18" color="#667eea"></uni-icons>
						<text class="card-title">创建时间</text>
					</view>
					<text class="card-content">{{ formatTime(analysisResult.createTime) }}</text>
				</view>

				<view class="detail-card">
					<view class="card-header">
						<uni-icons type="refresh" size="18" color="#667eea"></uni-icons>
						<text class="card-title">更新时间</text>
					</view>
					<text class="card-content">{{ formatTime(analysisResult.updateTime) }}</text>
				</view>

				<view class="detail-card">
					<view class="card-header">
						<uni-icons type="paperplane" size="18" color="#667eea"></uni-icons>
						<text class="card-title">结果ID</text>
					</view>
					<text class="card-content">{{ analysisResult.resultId }}</text>
				</view>
			</view>
		</view>

		<!-- 错误信息 -->
		<view class="error-section" v-if="analysisResult.errorMessage">
			<text class="section-title">错误信息</text>
			<view class="error-content">
				<uni-icons type="closeempty" size="20" color="#ff4d4f"></uni-icons>
				<text class="error-text">{{ analysisResult.errorMessage }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-section">
			<button class="action-btn secondary compact" @click="downloadVideo" v-if="analysisResult.status === 'COMPLETED'">
				<uni-icons type="download" size="16" color="#667eea"></uni-icons>
				<text class="btn-text">下载</text>
			</button>
			<button class="action-btn danger compact" @click="deleteAnalysis">
				<uni-icons type="trash" size="16" color="#fff"></uni-icons>
				<text class="btn-text">删除</text>
			</button>
		</view>
	</view>
	

</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
import { getAnalysisResultById, deleteAnalysisResult } from '@/api/modules/userAnalysisResult.js'
import { getVideoPlayUrl, downloadResultVideo } from '@/api/modules/video.js'
import { createConversation, askQuestion, getUserConversations, getConversation } from '@/api/modules/AiGuidance.js'
import { get } from '@/api/request.js'

const analysisResult = ref({})
const videoUrl = ref('')
const videoPoster = ref('')
const analysisStats = ref(null)

// 智能播放器相关状态
const videoElement = ref(null)
const playerData = ref({
	keyMoments: [],
	analysisHighlights: [],
	interactiveTips: [],
	bookmarks: [],
	analysisPoints: [],
	highlights: [],
	videoDuration: 0,
	frameRate: 30,
	totalFrames: 0
})

// 分析结果和建议信息
const analysisResultData = ref(null)
const suggestions = ref([])
const detailedAnalysis = ref(null)

// 加载状态管理，防止重复调用
const loadingStates = ref({
	analysisDetail: false,
	smartPlayer: false,
	analysisResultData: false,
	videoUrl: false
})
const currentTime = ref(0)
const videoDuration = ref(0)
const paused = ref(true)
const playbackRate = ref(1)
const showPoints = ref(false)
const upcomingInstructions = ref([])

// AI对话框相关
const conversationMessages = ref([])
const conversationInput = ref('')
const isConversationTyping = ref(false)
		const conversationId = ref('')
		
		// 收起状态管理
		const collapsedSections = ref({
			suggestions: false,
			detailedAnalysis: false
		})
		
		// 切换收起状态
		const toggleSection = (section) => {
			collapsedSections.value[section] = !collapsedSections.value[section]
		}

// 滚动到底部
const scrollToBottom = () => {
	// 使用nextTick确保DOM更新后再滚动
	nextTick(() => {
		try {
			// 尝试多种方式滚动
			const messagesContainer = document.querySelector('.conversation-messages')
			if (messagesContainer) {
				messagesContainer.scrollTop = messagesContainer.scrollHeight
				// 平滑滚动效果
				messagesContainer.scrollTo({
					top: messagesContainer.scrollHeight,
					behavior: 'smooth'
				})
			}
		} catch (error) {
			console.log('滚动失败，使用备用方案')
		}
	})
}

// 时间轴相关
const timelineProgressWidth = ref('0%')

// 运动类型映射
const sportTypeMap = {
	'general': '通用运动',
	'running': '跑步',
	'basketball': '篮球',
	'tennis': '网球',
	'swimming': '游泳',
	'fitness': '健身'
}

onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options
	
	console.log('📱 Detail页面初始化，接收到的参数:', options)
	console.log('  - id:', options.id)
	console.log('  - resultId:', options.resultId)
	
	if (options.id) {
		loadAnalysisDetail(options.id)
	}
	
	if (options.resultId) {
		loadVideoUrl(options.resultId)
	}
	
	// 立即尝试初始化AI会话（如果有resultId）
	if (options.resultId) {
		setTimeout(() => {
			initializeConversation()
		}, 500) // 减少延迟时间，让用户更快看到对话
	}
	
	// loadAnalysisResultData 现在在 loadAnalysisDetail 完成后调用，避免重复调用
	// loadAnalysisResultData(options.resultId, options.id) // 移除重复调用
})

onUnmounted(() => {
	// 清理blob URL以避免内存泄漏
	if (videoUrl.value && videoUrl.value.startsWith('blob:')) {
		URL.revokeObjectURL(videoUrl.value)
	}
})

// 监听当前时间变化，更新时间轴进度
watch(currentTime, (newTime) => {
	updateTimelineProgress()
	updateUpcomingInstructions()
})

// 加载分析详情
const loadAnalysisDetail = async (id) => {
	if (loadingStates.value.analysisDetail) {
		console.log('🔄 分析详情正在加载中，跳过重复调用')
		return
	}
	
	try {
		loadingStates.value.analysisDetail = true
		uni.showLoading({
			title: '加载中...'
		})

		const response = await getAnalysisResultById(id)
		if (response) {
			analysisResult.value = response
			
			// 解析分析数据统计信息（不显示完整数据）
			if (response.analysisData) {
				try {
					const data = JSON.parse(response.analysisData)
					if (data.videoInfo) {
						analysisStats.value = {
							totalFrames: data.videoInfo.totalFrames,
							processedFrames: data.videoInfo.processedFrames,
							fps: data.videoInfo.fps,
							duration: calculateDuration(data.videoInfo.totalFrames, data.videoInfo.fps)
						}
					}
				} catch (error) {
					console.error('解析分析数据失败:', error)
				}
			}
			
			// 初始化智能播放器数据
			if (response.resultId) {
				await initSmartPlayer()
				// 智能播放器初始化完成后，加载分析结果数据
				await loadAnalysisResultData(response.resultId, id)
				
				// 如果还没有初始化AI会话，现在初始化
				if (!conversationId.value) {
					console.log('🔄 数据加载完成，初始化AI会话')
					setTimeout(() => {
						initializeConversation()
					}, 200)
				}
			}
		}
	} catch (error) {
		console.error('加载分析详情失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	} finally {
		loadingStates.value.analysisDetail = false
		uni.hideLoading()
	}
}

// 加载视频播放URL
const loadVideoUrl = async (resultId) => {
	if (loadingStates.value.videoUrl) {
		console.log('🔄 视频URL正在加载中，跳过重复调用')
		return
	}
	
	try {
		loadingStates.value.videoUrl = true
		console.log('正在获取视频URL...')
		uni.showLoading({
			title: '加载视频...'
		})
		
		// 尝试获取视频URL
		try {
			const blobUrl = await getVideoPlayUrl(resultId)
			videoUrl.value = blobUrl
			console.log('✅ 视频URL获取成功:', videoUrl.value)
		} catch (videoError) {
			console.warn('⚠️ blob URL失败，使用直接URL:', videoError)
			// 如果blob方式失败，使用直接URL
			const baseUrl = 'http://localhost:8085'  // 临时硬编码，实际应从配置获取
			videoUrl.value = `${baseUrl}/api/video/play/${resultId}`
			console.log('🔄 使用备用视频URL:', videoUrl.value)
		}
		
		uni.hideLoading()
	} catch (error) {
		uni.hideLoading()
		console.error('❌ 加载视频失败:', error)
		uni.showToast({
			title: '视频加载失败',
			icon: 'none'
		})
	} finally {
		loadingStates.value.videoUrl = false
	}
}

// 初始化智能播放器
const initSmartPlayer = async () => {
	if (loadingStates.value.smartPlayer) {
		console.log('🔄 智能播放器正在初始化中，跳过重复调用')
		return
	}
	
	try {
		loadingStates.value.smartPlayer = true
		
		if (!analysisResult.value.resultId) {
			console.warn('resultId不存在，无法初始化智能播放器')
			loadingStates.value.smartPlayer = false
			return
		}

		const userId = getCurrentUserId()
		if (!userId) {
			console.warn('用户未登录，无法初始化智能播放器')
			loadingStates.value.smartPlayer = false
			return
		}

		console.log('🎬 正在初始化智能播放器...')
		
		try {
			// 获取智能播放器数据
			const response = await get(`/video/player/${analysisResult.value.resultId}`, {
				userId: userId
			})
			
			if (response && response.data) {
				playerData.value = response.data
				console.log('✅ 智能播放器数据加载成功:', playerData.value)
			} else {
				console.log('⚠️ 未找到智能播放器数据，使用默认配置')
				playerData.value = createDefaultPlayerData()
			}
		} catch (error) {
			console.error('❌ 智能播放器数据加载失败:', error)
			playerData.value = createDefaultPlayerData()
		}

	} catch (error) {
		console.error('❌ 初始化智能播放器失败:', error)
	} finally {
		loadingStates.value.smartPlayer = false
	}
}

// 创建默认播放器数据
const createDefaultPlayerData = () => {
	return {
		keyMoments: [],
		analysisHighlights: [],
		interactiveTips: [],
		bookmarks: [],
		analysisPoints: [],
		highlights: [],
		videoDuration: 0,
		frameRate: 30,
		totalFrames: 0
	}
}

// 视频事件处理
const onVideoError = (e) => {
	console.error('视频加载失败:', e)
	uni.showToast({
		title: '视频加载失败',
		icon: 'none'
	})
}

const onVideoLoadStart = () => {
	console.log('视频开始加载')
}

const onVideoCanPlay = () => {
	console.log('视频可以播放')
}

const onVideoLoadedMetadata = (event) => {
	console.log('视频元数据加载完成')
	
	// 获取视频时长
	if (event.target && event.target.duration) {
		videoDuration.value = event.target.duration
	}
	
	// 不在这里调用 initSmartPlayer，因为已经在 loadAnalysisDetail 中调用过了
	// initSmartPlayer() // 移除重复调用
}

const onVideoTimeUpdate = (event) => {
	const time = event.detail?.currentTime || event.target?.currentTime || 0
	currentTime.value = time
}

const onVideoPlay = (event) => {
	const time = event.detail?.currentTime || event.target?.currentTime || 0
	currentTime.value = time
	paused.value = false
}

const onVideoPause = (event) => {
	const time = event.detail?.currentTime || event.target?.currentTime || 0
	currentTime.value = time
	paused.value = true
}

const onVideoRateChange = (event) => {
	const rate = event.detail?.playbackRate || event.target?.playbackRate || 1
	playbackRate.value = rate
}

// 获取当前用户ID
const getCurrentUserId = () => {
	try {
		const userInfo = uni.getStorageSync('userInfo')
		if (userInfo && userInfo.id) {
			return typeof userInfo.id === 'string' ? parseInt(userInfo.id) : userInfo.id
		}
		return null
	} catch (error) {
		console.error('获取用户ID失败:', error)
		return null
	}
}

// 工具函数
const getSportTypeName = (type) => {
	return sportTypeMap[type] || type
}

const getStatusClass = (status) => {
	switch (status) {
		case 'COMPLETED': return 'status-completed'
		case 'ANALYZING': return 'status-analyzing'
		case 'FAILED': return 'status-failed'
		default: return 'status-pending'
	}
}

const getStatusText = (status) => {
	switch (status) {
		case 'COMPLETED': return '已完成'
		case 'ANALYZING': return '分析中'
		case 'FAILED': return '分析失败'
		default: return '等待中'
	}
}

const formatTime = (timeValue) => {
	// 如果是数字，则按秒数格式化为 mm:ss
	if (typeof timeValue === 'number') {
		const minutes = Math.floor(timeValue / 60)
		const seconds = Math.floor(timeValue % 60)
		return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
	}
	
	// 如果是日期字符串，则格式化为日期时间
	if (!timeValue) return '未知时间'
	
	try {
		const date = new Date(timeValue)
		return date.toLocaleString('zh-CN', {
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit'
		})
	} catch (error) {
		console.error('时间格式化失败:', error)
		return '时间格式错误'
	}
}

const calculateDuration = (totalFrames, fps) => {
	if (!totalFrames || !fps) return '0s'
	const seconds = Math.round(totalFrames / fps)
	return `${seconds}s`
}

// 时间轴相关方法
const getTimelinePosition = (timestamp) => {
	if (!videoDuration.value) return '0%'
	
	const percentage = (timestamp / videoDuration.value) * 100
	return `${Math.min(100, Math.max(0, percentage))}%`
}

const updateTimelineProgress = () => {
	if (!videoDuration.value) {
		timelineProgressWidth.value = '0%'
		return
	}
	
	const percentage = (currentTime.value / videoDuration.value) * 100
	timelineProgressWidth.value = `${Math.min(100, Math.max(0, percentage))}%`
}

const onTimelineClick = (event) => {
	if (!videoDuration.value) return
	
	const rect = event.currentTarget.getBoundingClientRect()
	const clickX = event.clientX - rect.left
	const percentage = clickX / rect.width
	const targetTime = percentage * videoDuration.value
	
	jumpToTime(targetTime)
}

// 视频控制方法
const jumpToTime = (timestamp) => {
	try {
		// #ifdef H5
		if (videoElement.value) {
			videoElement.value.currentTime = timestamp
		}
		// #endif
		
		// #ifndef H5
		const videoContext = uni.createVideoContext('videoElement')
		if (videoContext) {
			videoContext.seek(timestamp)
		}
		// #endif
		
		currentTime.value = timestamp
	} catch (error) {
		console.error('跳转视频失败:', error)
	}
}

const goToPreviousPoint = () => {
	if (!playerData.value || !playerData.value.analysisPoints) return
	
	const points = playerData.value.analysisPoints
	const currentPoints = points.filter(p => p.timestamp < currentTime.value)
	
	if (currentPoints.length > 0) {
		const previousPoint = currentPoints[currentPoints.length - 1]
		jumpToTime(previousPoint.timestamp)
	}
}

const goToNextPoint = () => {
	if (!playerData.value || !playerData.value.analysisPoints) return
	
	const points = playerData.value.analysisPoints
	const nextPoint = points.find(p => p.timestamp > currentTime.value)
	
	if (nextPoint) {
		jumpToTime(nextPoint.timestamp)
	}
}

const showAnalysisPoints = () => {
	showPoints.value = !showPoints.value
}

// 更新即将到来的指令
const updateUpcomingInstructions = () => {
	if (!playerData.value || !playerData.value.instructions) {
		upcomingInstructions.value = []
		return
	}
	
	const upcoming = playerData.value.instructions.filter(instruction => 
		instruction.timestamp > currentTime.value && 
		instruction.timestamp <= currentTime.value + 30 // 未来30秒内的指令
	).slice(0, 3)
	
	upcomingInstructions.value = upcoming
}

// 加载分析结果数据
const loadAnalysisResultData = async (resultId, analysisId) => {
	if (loadingStates.value.analysisResultData) {
		console.log('🔄 分析结果数据正在加载中，跳过重复调用')
		return
	}
	
	try {
		loadingStates.value.analysisResultData = true
		
		// 优先使用 resultId，如果没有则使用 analysisId 或 analysisResult 中的 resultId
		let targetResultId = resultId || analysisResult.value?.resultId
		
		// 如果还是没有 resultId，尝试从分析ID获取
		if (!targetResultId && analysisId) {
			console.log('🔍 使用分析ID，可能需要从分析结果中获取 resultId')
			// 这里可以等待 loadAnalysisDetail 完成后再获取 resultId
			await new Promise(resolve => setTimeout(resolve, 1000)) // 简单延迟等待
			targetResultId = analysisResult.value?.resultId
		}
		
		if (!targetResultId) {
			console.warn('⚠️ 没有找到有效的 resultId，跳过分析结果数据加载')
			loadingStates.value.analysisResultData = false
			return
		}
		
		// 获取当前用户ID
		const userId = getCurrentUserId()
		if (!userId) {
			console.warn('⚠️ 用户未登录，跳过分析结果数据加载')
			loadingStates.value.analysisResultData = false
			return
		}
		
		console.log('🔍 正在加载分析结果数据...', { resultId: targetResultId, userId })
		
		// 调用动态接口
		const response = await get(`/video/result/${targetResultId}`, {
			userId: userId
		}, {
			silent: false // 显示loading
		})
		
		console.log('✅ 分析结果数据加载成功:', response)
		
		if (response) {
			analysisResultData.value = response
			
			// 解析新格式的详细分析结果
			if (response.detailedAnalysis) {
				console.log('🔍 找到详细分析数据:', response.detailedAnalysis)
				detailedAnalysis.value = response.detailedAnalysis
				
				// 从personalizedCoaching中提取建议信息
				if (response.detailedAnalysis.personalizedCoaching) {
					const coaching = response.detailedAnalysis.personalizedCoaching
					let extractedSuggestions = []
					
					// 提取即时纠正建议
					if (coaching.immediateCorrections && Array.isArray(coaching.immediateCorrections)) {
						coaching.immediateCorrections.forEach(correction => {
							extractedSuggestions.push({
								content: correction.correction,
								type: 'correction',
								priority: correction.priority,
								issue: correction.issue,
								expectedImprovement: correction.expectedImprovement
							})
						})
					}
					
					// 提取训练建议
					if (coaching.drillRecommendations && Array.isArray(coaching.drillRecommendations)) {
						coaching.drillRecommendations.forEach(drill => {
							extractedSuggestions.push({
								content: drill.description,
								type: 'drill',
								title: drill.drillName,
								targetArea: drill.targetArea,
								sets: drill.sets,
								reps: drill.reps,
								frequency: drill.frequency
							})
						})
					}
					
					// 提取渐进式调整建议
					if (coaching.progressiveAdjustments && Array.isArray(coaching.progressiveAdjustments)) {
						coaching.progressiveAdjustments.forEach(adjustment => {
							extractedSuggestions.push({
								content: `目标角度调整：从${adjustment.currentAngle}°调整到${adjustment.targetAngle}°`,
								type: 'improvement',
								title: adjustment.phase,
								timeframe: adjustment.timeframe,
								steps: adjustment.adjustmentSteps
							})
						})
					}
					
					suggestions.value = extractedSuggestions
					console.log('✅ 提取建议信息成功:', suggestions.value)
				}
			}
			
			// 兼容旧格式的建议信息
			else if (response.suggestions && Array.isArray(response.suggestions)) {
				suggestions.value = response.suggestions
			} else if (response.suggestion) {
				// 如果是单个建议字符串，转换为数组
				suggestions.value = [{ content: response.suggestion, type: 'general' }]
			}
			
			// 兼容旧格式的详细分析结果
			if (!detailedAnalysis.value) {
				if (response.analysis) {
					detailedAnalysis.value = response.analysis
				} else if (response.analysisData) {
					try {
						detailedAnalysis.value = typeof response.analysisData === 'string' 
							? JSON.parse(response.analysisData) 
							: response.analysisData
	} catch (error) {
						console.warn('解析分析数据失败:', error)
					}
				}
			}
		}
		
	} catch (error) {
		console.error('❌ 加载分析结果数据失败:', error)
		uni.showToast({
			title: '加载分析结果失败',
			icon: 'none'
		})
	} finally {
		loadingStates.value.analysisResultData = false
	}
}



// 获取指令类型文本
const getInstructionTypeText = (type) => {
	switch (type) {
		case 'PAUSE': return '暂停'
		case 'SLOW_MOTION': return '慢动作'
		case 'HIGHLIGHT': return '重点'
		case 'EXPLANATION': return '说明'
		case 'WARNING': return '警告'
		case 'POSTURE': return '姿态'
		case 'MOVEMENT': return '动作'
		case 'TECHNIQUE': return '技巧'
		default: return '指令'
	}
}

// 获取要点类型样式类
const getPointTypeClass = (type) => {
	switch (type) {
		case 'WARNING': return 'type-warning'
		case 'HIGHLIGHT': return 'type-highlight'
		case 'EXPLANATION': return 'type-explanation'
		case 'POSTURE': return 'type-posture'
		case 'MOVEMENT': return 'type-movement'
		case 'TECHNIQUE': return 'type-technique'
		default: return 'type-default'
	}
}

// 获取要点类型文本
const getPointTypeText = (type) => {
	switch (type) {
		case 'WARNING': return '注意'
		case 'HIGHLIGHT': return '重点'
		case 'EXPLANATION': return '说明'
		case 'PAUSE': return '暂停'
		case 'SLOW_MOTION': return '慢动作'
		case 'POSTURE': return '姿态'
		case 'MOVEMENT': return '动作'
		case 'TECHNIQUE': return '技巧'
		default: return '要点'
	}
}

// 获取重要性等级样式类
const getImportanceClass = (importance) => {
	switch (importance) {
		case 1: return 'importance-low'
		case 2: return 'importance-medium'
		case 3: return 'importance-high'
		case 4: return 'importance-critical'
		default: return 'importance-medium'
	}
}

// 获取重要性等级文本
const getImportanceText = (importance) => {
	switch (importance) {
		case 1: return '普通'
		case 2: return '重要'
		case 3: return '关键'
		case 4: return '严重'
		default: return '重要'
	}
}

// 建议相关辅助函数
const getSuggestionIcon = (type) => {
	switch (type) {
		case 'posture': return 'person'
		case 'technique': return 'gear'
		case 'safety': return 'info'
		case 'improvement': return 'up'
		case 'warning': return 'closeempty'
		default: return 'lightbulb'
	}
}

const getSuggestionIconClass = (type) => {
	switch (type) {
		case 'posture': return 'icon-posture'
		case 'technique': return 'icon-technique'
		case 'safety': return 'icon-safety'
		case 'improvement': return 'icon-improvement'
		case 'warning': return 'icon-warning'
		default: return 'icon-general'
	}
}

const getSuggestionTypeText = (type) => {
	switch (type) {
		case 'posture': return '姿势建议'
		case 'technique': return '技术要点'
		case 'safety': return '安全提醒'
		case 'improvement': return '改进建议'
		case 'warning': return '注意事项'
		default: return '智能建议'
	}
}

const getPriorityClass = (priority) => {
	switch (priority?.toLowerCase()) {
		case 'high': 
		case '高': return 'priority-high'
		case 'medium': 
		case '中': return 'priority-medium'
		case 'low': 
		case '低': return 'priority-low'
		default: return 'priority-medium'
	}
}

const getPriorityText = (priority) => {
	switch (priority?.toLowerCase()) {
		case 'high': 
		case '高': return '高优先级'
		case 'medium': 
		case '中': return '中优先级'
		case 'low': 
		case '低': return '低优先级'
		default: return '中优先级'
	}
}

// 分析结果相关辅助函数
const getScoreDescription = (score) => {
	const numScore = parseFloat(score)
	if (numScore >= 90) return '优秀！运动表现非常好'
	if (numScore >= 80) return '良好，有一些可以改进的地方'
	if (numScore >= 70) return '及格，需要注意一些问题'
	if (numScore >= 60) return '有待改进，建议加强练习'
	return '需要重点改进，建议寻求专业指导'
}

const getMetricName = (key) => {
	const metricNames = {
		'posture': '姿势',
		'balance': '平衡',
		'coordination': '协调性',
		'strength': '力量',
		'flexibility': '柔韧性',
		'endurance': '耐力',
		'technique': '技术',
		'rhythm': '节奏',
		'form': '动作标准度',
		'efficiency': '运动效率'
	}
	return metricNames[key] || key
}

const getMetricScoreClass = (score) => {
	const numScore = parseFloat(score)
	if (numScore >= 80) return 'score-excellent'
	if (numScore >= 60) return 'score-good'
	if (numScore >= 40) return 'score-fair'
	return 'score-poor'
}

const getProgressWidth = (score) => {
	const numScore = parseFloat(score)
	return `${Math.min(100, Math.max(0, numScore))}%`
}

const getSeverityClass = (severity) => {
	switch (severity?.toLowerCase()) {
		case 'high': 
		case 'critical': 
		case '严重': return 'severity-high'
		case 'medium': 
		case '中等': return 'severity-medium'
		case 'low': 
		case '轻微': return 'severity-low'
		default: return 'severity-medium'
	}
}

// 开始AI指导
const startAIGuidance = async () => {
	try {
		const userId = getCurrentUserId()
		if (!userId) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}

		if (!analysisResult.value.resultId) {
			uni.showToast({
				title: '缺少分析结果ID',
				icon: 'none'
			})
			return
		}

		// 跳转到AI对话页面
		uni.navigateTo({
			url: `/pages/ai/chat?resultId=${analysisResult.value.resultId}&userId=${userId}&sportType=${analysisResult.value.sportType || 'general'}`
		})

	} catch (error) {
		uni.hideLoading()
		console.error('创建AI指导会话失败:', error)
		uni.showToast({
			title: '创建会话失败',
			icon: 'none'
		})
	}
}

// 下载视频
const downloadVideo = async () => {
	try {
		uni.showLoading({
			title: '准备下载...'
		})

		uni.hideLoading()
		uni.showToast({
			title: '下载功能开发中...',
			icon: 'none'
		})
	} catch (error) {
		uni.hideLoading()
		console.error('下载视频失败:', error)
		uni.showToast({
			title: '下载失败',
			icon: 'none'
		})
	}
}

// 删除分析
const deleteAnalysis = () => {
	uni.showModal({
		title: '确认删除',
		content: '删除后无法恢复，确定要删除这个分析结果吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
					uni.showLoading({
						title: '删除中...'
					})

					await deleteAnalysisResult(analysisResult.value.id)
					
					uni.hideLoading()
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})

					setTimeout(() => {
						uni.navigateBack()
					}, 1500)

				} catch (error) {
					uni.hideLoading()
					console.error('删除分析失败:', error)
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					})
				}
			}
		}
	})
}

// 新的分析数据显示辅助函数
const getRiskClass = (riskLevel) => {
	switch (riskLevel?.toLowerCase()) {
		case '低': return 'risk-low'
		case '中': return 'risk-medium' 
		case '高': return 'risk-high'
		default: return 'risk-medium'
	}
}

const getPhaseScoreClass = (score) => {
	if (score >= 90) return 'score-excellent'
	if (score >= 80) return 'score-good'
	if (score >= 70) return 'score-fair'
	return 'score-poor'
}

const getJointDisplayName = (jointName) => {
	const jointNames = {
		'rightKnee': '右膝',
		'leftKnee': '左膝', 
		'trunk': '躯干',
		'rightElbow': '右肘',
		'leftElbow': '左肘',
		'rightAnkle': '右踝',
		'leftAnkle': '左踝',
		'rightShoulder': '右肩',
		'leftShoulder': '左肩'
	}
	return jointNames[jointName] || jointName
}

const getRiskFactorClass = (riskFactor) => {
	if (riskFactor < 5) return 'risk-low'
	if (riskFactor < 15) return 'risk-medium'
	return 'risk-high'
}

// 测试暂停功能
const testPauseFunction = () => {
	console.log('🧪 开始测试暂停功能')
	
	// 创建一个测试指令
	const testInstruction = {
		timestamp: currentTime.value,
		action: 'PAUSE',
		parameter: '2', // 暂停2秒
		message: '测试暂停功能 - 2秒后自动恢复'
	}
	
	console.log('🎯 执行测试指令:', testInstruction)
	executePlaybackInstruction(testInstruction)
}

// 格式化聊天时间
const formatChatTime = (timestamp) => {
	if (!timestamp) return ''
	
	try {
		// 处理不同的时间戳格式
		let date
		if (typeof timestamp === 'string' && timestamp.includes('-')) {
			// 处理 "2025-09-12 19:47:07" 格式
			date = new Date(timestamp.replace(' ', 'T'))
		} else {
			date = new Date(timestamp)
		}
		
		const now = new Date()
		const diff = now - date
		
		// 如果是今天
		if (diff < 24 * 60 * 60 * 1000) {
			return date.toLocaleTimeString('zh-CN', { 
				hour: '2-digit', 
				minute: '2-digit' 
			})
		}
		
		// 如果是昨天或更早
		return date.toLocaleDateString('zh-CN', { 
			month: '2-digit', 
			day: '2-digit',
			hour: '2-digit', 
			minute: '2-digit' 
		})
	} catch (error) {
		console.error('时间格式化失败:', error, timestamp)
		return ''
	}
}

// 判断是否为AI消息
const isAIMessage = (senderType) => {
	return senderType === 'AI' || senderType === 'AI_ASSISTANT'
}

// 获取消息样式类名
const getMessageClass = (senderType) => {
	if (senderType === 'USER') return 'user'
	if (senderType === 'AI' || senderType === 'AI_ASSISTANT') return 'ai'
	return 'user' // 默认为用户消息样式
}

// AI对话框功能
const sendConversationMessage = async () => {
	if (!conversationInput.value.trim() || isConversationTyping.value) return
	
	// 如果没有会话ID，先创建会话
	if (!conversationId.value) {
		await initializeConversation()
		if (!conversationId.value) {
			uni.showToast({
				title: '无法创建会话，请稍后再试',
				icon: 'none'
			})
			return
		}
	}
	
	const question = conversationInput.value
	
	// 添加用户消息到界面
	const userMessage = {
		messageId: `user-${Date.now()}`,
		content: question,
		senderType: 'USER',
		timestamp: new Date().toISOString().replace('T', ' ').substring(0, 19)
	}
	conversationMessages.value.push(userMessage)
	
	// 保持只显示最近两条消息
	if (conversationMessages.value.length > 2) {
		conversationMessages.value = conversationMessages.value.slice(-2)
	}
	
	conversationInput.value = ''
	
	// 滚动到底部显示新消息
	scrollToBottom()
	
	// 显示AI正在输入
	isConversationTyping.value = true
	
	try {
		console.log('🤖 发送AI问题:', { conversationId: conversationId.value, question })
		
		const response = await askQuestion({
			conversationId: conversationId.value,
			question: question,
			resultId: analysisResult.value?.resultId || analysisResultData.value?.resultId,
			sportType: 'general'
		})
		
		console.log('🤖 AI回复响应:', response)
		
		// 处理AI回复
		const aiResponseData = response?.data?.aiResponse || response?.aiResponse
		if (aiResponseData) {
			const aiMessage = {
				messageId: aiResponseData.messageId || `ai-${Date.now()}`,
				content: aiResponseData.content || '抱歉，我无法理解您的问题。',
				senderType: 'AI_ASSISTANT',
				timestamp: aiResponseData.timestamp || new Date().toISOString().replace('T', ' ').substring(0, 19)
			}
			conversationMessages.value.push(aiMessage)
			
			// 保持只显示最近两条消息
			if (conversationMessages.value.length > 2) {
				conversationMessages.value = conversationMessages.value.slice(-2)
			}
			
			// 滚动到底部显示AI回复
			scrollToBottom()
		} else {
			// 如果没有标准格式，尝试直接使用响应内容
			const aiMessage = {
				messageId: `ai-${Date.now()}`,
				content: response?.content || response?.message || '抱歉，我现在无法回答您的问题。',
				senderType: 'AI_ASSISTANT',
				timestamp: new Date().toISOString().replace('T', ' ').substring(0, 19)
			}
			conversationMessages.value.push(aiMessage)
			
			// 保持只显示最近两条消息
			if (conversationMessages.value.length > 2) {
				conversationMessages.value = conversationMessages.value.slice(-2)
			}
			
			// 滚动到底部显示AI回复
			scrollToBottom()
		}
		
	} catch (error) {
		console.error('❌ AI回复失败:', error)
		const errorMessage = {
			messageId: `ai-error-${Date.now()}`,
			content: '抱歉，我现在无法回答您的问题。请稍后再试。',
			senderType: 'AI_ASSISTANT',
			timestamp: new Date().toISOString().replace('T', ' ').substring(0, 19)
		}
		conversationMessages.value.push(errorMessage)
		// 滚动到底部显示错误消息
		scrollToBottom()
		
		uni.showToast({
			title: 'AI回复失败，请稍后再试',
			icon: 'none'
		})
	} finally {
		isConversationTyping.value = false
		console.log(`📱 当前共有 ${conversationMessages.value.length} 条消息`)
	}
}

// 初始化会话
const initializeConversation = async () => {
	try {
		const resultId = analysisResult.value?.resultId || analysisResultData.value?.resultId
		const userId = getCurrentUserId()
		
		if (!resultId || !userId) {
			console.error('❌ 无法创建会话，缺少必要参数:', { resultId, userId })
			return false
		}
		
		console.log('🔄 初始化AI会话:', { resultId, userId })
		
		// 先尝试获取现有会话
		try {
			const existingConversationsResponse = await getUserConversations(resultId)
			console.log('📋 现有会话响应:', existingConversationsResponse)
			
			// 正确解析API响应结构
			const existingConversations = existingConversationsResponse?.data || existingConversationsResponse
			
			if (existingConversations && existingConversations.length > 0) {
				// 使用最新的会话
				const latestConversation = existingConversations[0]
				console.log('📋 使用现有会话:', latestConversation)
				
				// 如果会话对象本身就包含消息，直接使用
				if (latestConversation.messages && latestConversation.messages.length > 0) {
					conversationId.value = latestConversation.conversationId
					const recentMessages = latestConversation.messages.slice(-2)
					conversationMessages.value = recentMessages
					console.log(`📱 直接从会话对象加载 ${latestConversation.messages.length} 条消息，显示最近 ${recentMessages.length} 条`)
					console.log('📱 显示的消息:', recentMessages)
					
					// 调试：检查消息格式
					recentMessages.forEach((msg, index) => {
						console.log(`📱 消息 ${index + 1}:`, {
							senderType: msg.senderType,
							content: msg.content.substring(0, 50) + '...',
							timestamp: msg.timestamp,
							isAI: isAIMessage(msg.senderType),
							cssClass: getMessageClass(msg.senderType)
						})
					})
					
					scrollToBottom()
					return true
				} else {
					// 如果会话对象没有消息，再次获取会话详情
					conversationId.value = latestConversation.conversationId
					const conversationDetails = await getConversation(latestConversation.conversationId)
					console.log('📋 会话详情:', conversationDetails)
					
					// 正确解析API响应结构
					const messagesData = conversationDetails?.data?.messages || conversationDetails?.messages
					
					if (messagesData && messagesData.length > 0) {
						// 只显示最近两条消息
						const recentMessages = messagesData.slice(-2)
						conversationMessages.value = recentMessages
						console.log(`📱 加载现有会话，共 ${messagesData.length} 条消息，显示最近 ${recentMessages.length} 条`)
						console.log('📱 显示的消息:', recentMessages)
						
						// 调试：检查消息格式
						recentMessages.forEach((msg, index) => {
							console.log(`📱 消息 ${index + 1}:`, {
								senderType: msg.senderType,
								content: msg.content.substring(0, 50) + '...',
								timestamp: msg.timestamp,
								isAI: isAIMessage(msg.senderType),
								cssClass: getMessageClass(msg.senderType)
							})
						})
						
						// 滚动到底部
						scrollToBottom()
						return true
					}
				}
			}
		} catch (error) {
			console.log('🔄 获取现有会话失败，创建新会话:', error)
		}
		
		// 如果没有现有会话或获取失败，创建新会话
		console.log('🔄 创建新AI会话:', { resultId, userId })
		
		const response = await createConversation({
			resultId,
			userId,
			sportType: 'general'
		})
		
		console.log('✅ 会话创建成功:', response)
		
		// 正确解析API响应结构
		const responseData = response?.data || response
		
		if (responseData && responseData.conversationId) {
			conversationId.value = responseData.conversationId
			
			// 如果有历史消息，只显示最近两条
			const messagesData = responseData.messages || []
			if (messagesData.length > 0) {
				// 只取最近两条消息
				const recentMessages = messagesData.slice(-2)
				conversationMessages.value = recentMessages
				console.log(`📱 新会话包含 ${messagesData.length} 条历史消息，显示最近 ${recentMessages.length} 条`)
				console.log('📱 显示的消息:', recentMessages)
			} else {
				// 添加欢迎消息
				const welcomeMessage = {
					messageId: `ai-welcome-${Date.now()}`,
					content: '你好！我已经完成了你的运动分析。这次分析显示你的动作总体不错，但在膝盖角度和躯干稳定性方面还有改进空间。有什么具体问题想了解吗？',
					senderType: 'AI_ASSISTANT',
					timestamp: new Date().toISOString().replace('T', ' ').substring(0, 19)
				}
				conversationMessages.value = [welcomeMessage]
				console.log('📱 创建新会话，添加欢迎消息')
			}
			
			// 如果还是没有消息，记录调试信息
			if (conversationMessages.value.length === 0) {
				console.log('⚠️ 仍然没有消息显示，检查数据解析是否正确')
			}
			
			// 滚动到底部
			scrollToBottom()
			
			return true
		} else {
			console.error('❌ 会话创建失败，响应格式异常:', response)
			console.error('❌ 解析后的数据:', responseData)
			return false
		}
		
	} catch (error) {
		console.error('❌ 初始化会话失败:', error)
		return false
	}
}

const goToFullChat = () => {
	// 跳转到完整的AI对话页面
	// 尝试多种方式获取resultId
	let resultId = analysisResult.value?.resultId || analysisResultData.value?.resultId
	
	// 如果从数据中获取不到，尝试从页面参数中获取
	if (!resultId) {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		resultId = options.resultId
	}
	
	const userId = getCurrentUserId()
	
	console.log('🔍 准备跳转AI聊天页面:')
	console.log('  - analysisResult:', analysisResult.value)
	console.log('  - analysisResultData:', analysisResultData.value)
	console.log('  - 页面参数resultId:', getCurrentPages()[getCurrentPages().length - 1].options.resultId)
	console.log('  - 最终使用的resultId:', resultId)
	console.log('  - userId:', userId)
	console.log('  - userInfo from storage:', uni.getStorageSync('userInfo'))
	
	if (resultId && userId) {
		const chatUrl = `/pages/ai/chat?resultId=${resultId}&userId=${userId}&source=analysis&sportType=general`
		console.log('✅ 准备跳转到:', chatUrl)
		
		uni.navigateTo({
			url: chatUrl
		})
	} else {
		const missingParams = []
		if (!resultId) missingParams.push('分析ID')
		if (!userId) missingParams.push('用户ID')
		
		console.error('❌ 跳转失败，缺少参数:')
		console.error('  - resultId:', resultId)
		console.error('  - userId:', userId)
		console.error('  - analysisResult:', analysisResult.value)
		console.error('  - analysisResultData:', analysisResultData.value)
		console.error('  - 页面参数:', getCurrentPages()[getCurrentPages().length - 1].options)
		
		uni.showToast({
			title: `缺少必要参数: ${missingParams.join(', ')}`,
			icon: 'none',
			duration: 3000
		})
	}
}
</script>

<style lang="scss" scoped>
.analysis-detail-container {
	background-color: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 100px;
}

.header-section {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.video-info {
		display: flex;
		align-items: center;
		gap: 12px;
		
		.info-content {
			.sport-type {
				font-size: 20px;
				font-weight: bold;
				color: white;
				display: block;
				margin-bottom: 4px;
			}
			
			.video-name {
				font-size: 14px;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
	
	.status-badge {
		padding: 6px 12px;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 0.2);
		
		.status-text {
			font-size: 12px;
			color: white;
			font-weight: 500;
		}
	}
}

.summary-section, .video-section, .stats-section, .details-section, .error-section, 
.suggestions-section, .detailed-analysis-section {
	background: white;
	margin: 15px;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		gap: 8px;
	}
}

// 可收起section的样式
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	cursor: pointer;
	padding: 12px;
	border-radius: 8px;
	background: #f8f9fa;
	transition: background-color 0.3s ease;
	
	&:hover {
		background: #e9ecef;
	}
	
	.header-left {
		display: flex;
		align-items: center;
		gap: 8px;
		
		.section-title {
			margin-bottom: 0;
		}
	}
	
	.header-right {
		opacity: 0.6;
		transition: opacity 0.3s ease;
	}
	
	&:hover .header-right {
		opacity: 1;
	}
}

.summary-content {
	.summary-text {
		font-size: 15px;
		color: #666;
		line-height: 1.6;
	}
}

.video-player-container {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	background: white;
	
	.video-wrapper {
		position: relative;
		
		video {
			width: 100%;
			height: 280px;
			border-radius: 12px 12px 0 0;
			background-color: #000;
		}
	}
	
	.player-info {
		padding: 12px 16px;
		background: #f8f9fa;
		border-bottom: 1px solid #eee;
		
		.info-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.info-item {
				font-size: 13px;
				color: #666;
				font-weight: 500;
			}
		}
	}
	
	.timeline-container {
		padding: 16px;
		background: white;
		
		.timeline-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;
			
			.timeline-title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}
			
			.timeline-stats {
				font-size: 12px;
				color: #666;
			}
		}
		
		.timeline-track {
			position: relative;
			
			.timeline-progress-bg {
				width: 100%;
				height: 8px;
				background: #e9ecef;
				border-radius: 4px;
				position: relative;
				cursor: pointer;
				
				.timeline-progress {
					height: 100%;
					background: linear-gradient(90deg, #667eea, #764ba2);
					border-radius: 4px;
					transition: width 0.1s ease;
				}
				
				.timeline-markers {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					
					.timeline-marker {
						position: absolute;
						top: -3px;
						width: 14px;
						height: 14px;
						border-radius: 50%;
						cursor: pointer;
						transform: translateX(-50%);
						z-index: 2;
						
						&.marker-pause {
							background: #ff6b6b;
							border: 2px solid white;
							box-shadow: 0 2px 4px rgba(0,0,0,0.2);
						}
						
						&.marker-slow_motion {
							background: #4ecdc4;
							border: 2px solid white;
							box-shadow: 0 2px 4px rgba(0,0,0,0.2);
						}
						
						&.marker-explanation {
							background: #45b7d1;
							border: 2px solid white;
							box-shadow: 0 2px 4px rgba(0,0,0,0.2);
						}
						
						&.marker-analysis-point {
							background: #96ceb4;
							border: 2px solid white;
							box-shadow: 0 2px 4px rgba(0,0,0,0.2);
						}
						

						
						&.marker-highlight {
							background: #ff9ff3;
							border: 2px solid white;
							box-shadow: 0 2px 4px rgba(0,0,0,0.2);
						}
						
						.marker-tooltip {
							position: absolute;
							bottom: 25px;
							left: 50%;
							transform: translateX(-50%);
							background: rgba(0, 0, 0, 0.9);
							color: white;
							padding: 8px 12px;
							border-radius: 6px;
							font-size: 11px;
							white-space: nowrap;
							opacity: 0;
							pointer-events: none;
							transition: opacity 0.3s;
							z-index: 20;
							
							.tooltip-time {
								display: block;
								font-weight: bold;
								margin-bottom: 2px;
								color: #ffd93d;
							}
							
							.tooltip-type {
								display: block;
								color: #87ceeb;
								margin-bottom: 2px;
							}
							
							.tooltip-desc {
								display: block;
								max-width: 200px;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
						
						&:hover .marker-tooltip {
							opacity: 1;
						}
					}
				}
			}
		}
	}
}

.player-controls {
	padding: 16px;
	background: #f8f9fa;
	border-radius: 0 0 12px 12px;
	
	.control-row {
		display: flex;
		gap: 12px;
		margin-bottom: 16px;
		flex-wrap: wrap;
		
		.control-btn {
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 12px 18px;
			border: none;
			border-radius: 8px;
			font-size: 14px;
			cursor: pointer;
			transition: all 0.3s;
			
			&.primary {
				background: #667eea;
				color: white;
				
				&:hover {
					background: #5a67d8;
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
				}
			}
			
			&.secondary {
				background: white;
				color: #667eea;
				border: 1px solid #667eea;
				
				&:hover {
					background: #667eea;
					color: white;
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
				}
			}
			
			.btn-text {
				font-size: 13px;
				font-weight: 500;
			}
		}
	}
	
	.upcoming-preview {
		.preview-title {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 8px;
			display: block;
		}
		
		.instruction-chips {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			
			.instruction-chip {
				display: flex;
				align-items: center;
				gap: 6px;
				padding: 6px 12px;
				background: white;
				border: 1px solid #ddd;
				border-radius: 16px;
				font-size: 11px;
				cursor: pointer;
				transition: all 0.3s;
				
				&:hover {
					background: #667eea;
					color: white;
					border-color: #667eea;
					transform: translateY(-1px);
				}
				
				.chip-time {
					font-weight: bold;
					color: #667eea;
				}
				
				.chip-type {
					color: #666;
				}
				
				&:hover .chip-time,
				&:hover .chip-type {
					color: white;
				}
			}
		}
	}
}

.analysis-points {
	margin: 15px;
	background: white;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	
	.points-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
	
	.points-list {
		max-height: 400px;
		
		.point-item {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding: 15px;
			background: #f8f9fa;
			border-radius: 8px;
			margin-bottom: 10px;
			cursor: pointer;
			transition: all 0.3s;
			border-left: 4px solid #667eea;
			
			&:hover {
				background: #f0f4ff;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			}
			
			.point-time {
				font-size: 12px;
				color: #667eea;
				font-weight: bold;
				min-width: 50px;
				background-color: white;
				padding: 6px 10px;
				border-radius: 12px;
				text-align: center;
			}
			
			.point-content {
				flex: 1;
				
				.point-title {
					font-size: 14px;
					font-weight: 500;
					color: #333;
					display: block;
					margin-bottom: 6px;
				}
				
				.point-desc {
					font-size: 13px;
					color: #666;
					line-height: 1.4;
					margin-bottom: 4px;
				}
				
				.point-suggestion {
					font-size: 12px;
					color: #1890ff;
					line-height: 1.4;
					background-color: #e6f7ff;
					padding: 4px 8px;
					border-radius: 4px;
					margin-top: 4px;
					display: block;
				}
			}
			
			.point-meta {
				display: flex;
				flex-direction: column;
				gap: 4px;
				align-items: flex-end;
				
				.point-type {
					padding: 4px 8px;
					border-radius: 12px;
					font-size: 10px;
					font-weight: 500;
					
					&.type-warning {
						background-color: #fff2f0;
						color: #ff4d4f;
					}
					
					&.type-highlight {
						background-color: #fff7e6;
						color: #fa8c16;
					}
					
					&.type-explanation {
						background-color: #e6f7ff;
						color: #1890ff;
					}
					
					&.type-posture {
						background-color: #f6ffed;
						color: #52c41a;
					}
					
					&.type-movement {
						background-color: #fff7e6;
						color: #fa8c16;
					}
					
					&.type-technique {
						background-color: #f9f0ff;
						color: #722ed1;
					}
					
					&.type-default {
						background-color: #f6ffed;
						color: #52c41a;
					}
				}
				
				.point-importance {
					padding: 2px 6px;
					border-radius: 8px;
					font-size: 9px;
					font-weight: 500;
					
					&.importance-low {
						background-color: #f0f0f0;
						color: #666;
					}
					
					&.importance-medium {
						background-color: #fff7e6;
						color: #fa8c16;
					}
					
					&.importance-high {
						background-color: #fff2f0;
						color: #ff4d4f;
					}
					
					&.importance-critical {
						background-color: #ff4d4f;
						color: white;
					}
				}
				
				.point-bodypart {
					font-size: 10px;
					color: #999;
					padding: 2px 6px;
					background-color: #f5f5f5;
					border-radius: 8px;
				}
			}
		}
	}
	
	.video-tips {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 15px;
		padding: 12px;
		background-color: #e6f7ff;
		border-radius: 8px;
		border: 1px solid #91d5ff;
		
		.tips-text {
			font-size: 13px;
			color: #1890ff;
		}
	}
}

.highlights-section {
	background: white;
	margin: 15px;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
	
	.highlights-grid {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	
	.highlight-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 15px;
		background: #f8f9fa;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.3s;
		border-left: 4px solid #feca57;
		
		&:hover {
			background: #fff9e6;
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
	}
	
	.highlight-time {
		font-size: 12px;
		color: #667eea;
		font-weight: bold;
		min-width: 50px;
		background-color: white;
		padding: 6px 10px;
		border-radius: 12px;
		text-align: center;
	}
	
	.highlight-content {
		flex: 1;
		
		.highlight-title {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			display: block;
			margin-bottom: 4px;
		}
		
		.highlight-desc {
			font-size: 12px;
			color: #666;
			line-height: 1.4;
		}
	}
	
	.highlight-type {
		font-size: 10px;
		padding: 4px 8px;
		background: #667eea;
		color: white;
		border-radius: 12px;
	}
}

.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	
	.stat-item {
		text-align: center;
		padding: 15px;
		background-color: #f8f9fa;
		border-radius: 8px;
		
		.stat-value {
			font-size: 20px;
			font-weight: bold;
			color: #667eea;
			display: block;
			margin-bottom: 4px;
		}
		
		.stat-label {
			font-size: 13px;
			color: #666;
		}
	}
}

.detail-cards {
	.detail-card {
		padding: 15px;
		border: 1px solid #f0f0f0;
		border-radius: 8px;
		margin-bottom: 10px;
		
		.card-header {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 8px;
			
			.card-title {
				font-size: 14px;
				font-weight: 500;
				color: #333;
			}
		}
		
		.card-content {
			font-size: 13px;
			color: #666;
			word-break: break-all;
		}
	}
}

.error-content {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 15px;
	background-color: #fff2f0;
	border-radius: 8px;
	border: 1px solid #ffccc7;
	
	.error-text {
		font-size: 14px;
		color: #ff4d4f;
		line-height: 1.5;
		flex: 1;
	}
}

.action-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 12px 20px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	gap: 12px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
	
	.action-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		border-radius: 8px;
		font-size: 13px;
		font-weight: 500;
		border: none;
		transition: all 0.2s ease;
		
		&.compact {
			padding: 10px 16px;
			height: 36px;
		}
		
		&.secondary {
			background-color: #f8f9fa;
			color: #667eea;
			border: 1px solid #e9ecef;
			
			&:active {
				background-color: #e9ecef;
				transform: scale(0.98);
			}
		}
		
		&.danger {
			background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
			color: white;
			
			&:active {
				transform: scale(0.98);
				opacity: 0.9;
			}
		}
		
		.btn-text {
			font-size: 12px;
			font-weight: 500;
		}
	}
}

// 建议区域样式
.suggestions-section {
	.suggestions-container {
		.suggestion-item {
			background: #f8f9fa;
	border-radius: 12px;
			padding: 16px;
			margin-bottom: 12px;
			border-left: 4px solid #667eea;
			transition: all 0.3s ease;
			
			&:hover {
				background: #f0f4ff;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
			}
			
			.suggestion-header {
		display: flex;
		align-items: center;
				gap: 10px;
				margin-bottom: 10px;
				
				.suggestion-icon {
					width: 28px;
					height: 28px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.icon-posture { background: #52c41a; }
					&.icon-technique { background: #1890ff; }
					&.icon-safety { background: #ff4d4f; }
					&.icon-improvement { background: #fa8c16; }
					&.icon-warning { background: #faad14; }
					&.icon-general { background: #667eea; }
				}
				
				.suggestion-type {
					font-size: 14px;
			font-weight: 500;
			color: #333;
					flex: 1;
				}
				
				.suggestion-priority {
					padding: 4px 8px;
					border-radius: 12px;
					font-size: 10px;
					font-weight: 500;
					
					&.priority-high {
						background: #fff2f0;
						color: #ff4d4f;
					}
					
					&.priority-medium {
						background: #fff7e6;
						color: #fa8c16;
					}
					
					&.priority-low {
						background: #f6ffed;
						color: #52c41a;
					}
				}
			}
			
			.suggestion-content {
				.suggestion-text {
					font-size: 15px;
					color: #333;
					line-height: 1.6;
					display: block;
					margin-bottom: 8px;
				}
				
				.suggestion-details {
					background: #e6f7ff;
					padding: 10px;
					border-radius: 8px;
					margin-top: 8px;
					
					.details-text {
						font-size: 13px;
						color: #1890ff;
						line-height: 1.5;
					}
				}
			}
			
			.suggestion-footer {
				display: flex;
				gap: 15px;
				margin-top: 10px;
				
				.suggestion-meta {
					font-size: 12px;
			color: #666;
					background: #f0f0f0;
					padding: 4px 8px;
					border-radius: 8px;
				}
			}
		}
	}
}

// 详细分析结果样式
.detailed-analysis-section {
	.analysis-container {
		.analysis-score {
			display: flex;
			align-items: center;
			gap: 20px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 20px;
			border-radius: 12px;
			margin-bottom: 20px;
			
			.score-circle {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.2);
				display: flex;
				flex-direction: column;
			align-items: center;
			justify-content: center;
				
				.score-value {
					font-size: 24px;
					font-weight: bold;
					color: white;
				}
				
				.score-label {
					font-size: 12px;
					color: rgba(255, 255, 255, 0.8);
				}
			}
			
			.score-description {
				flex: 1;
				
				.score-desc-text {
			font-size: 16px;
					line-height: 1.5;
					margin-bottom: 8px;
					display: block;
				}
				
				.efficiency-text {
					font-size: 14px;
					opacity: 0.9;
					margin-bottom: 4px;
					display: block;
				}
				
				.risk-text {
					font-size: 14px;
					padding: 4px 8px;
					border-radius: 12px;
					display: inline-block;
					
					&.risk-low {
						background: rgba(82, 196, 26, 0.2);
						color: #52c41a;
					}
					
					&.risk-medium {
						background: rgba(250, 140, 22, 0.2);
						color: #fa8c16;
					}
					
					&.risk-high {
						background: rgba(255, 77, 79, 0.2);
						color: #ff4d4f;
					}
				}
			}
		}
		
		// 优势与不足样式
		.strengths-weaknesses {
			display: flex;
			gap: 16px;
			margin-bottom: 20px;
			
			.strengths, .weaknesses {
				flex: 1;
				background: white;
				border-radius: 12px;
		padding: 16px;
				box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			}
			
			.strengths {
				border-left: 4px solid #52c41a;
			}
			
			.weaknesses {
				border-left: 4px solid #ff4d4f;
			}
			
			.section-subtitle {
				font-size: 15px;
				font-weight: 600;
				color: #333;
				margin-bottom: 12px;
				display: block;
			}
			
			.strength-item, .weakness-item {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-bottom: 8px;
				
				.strength-text, .weakness-text {
					font-size: 13px;
				color: #333;
					line-height: 1.4;
				}
			}
		}
		
		// 运动阶段分析样式
		.movement-phases {
			margin-bottom: 20px;
			
			.section-subtitle {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin-bottom: 15px;
				display: block;
			}
			
			.phase-item {
				background: #f8f9fa;
				border-radius: 12px;
				padding: 16px;
				margin-bottom: 12px;
				border-left: 4px solid #1890ff;
				
				.phase-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
				margin-bottom: 8px;
					
					.phase-name {
						font-size: 15px;
						font-weight: 600;
						color: #333;
					}
					
					.phase-score {
						padding: 4px 8px;
						border-radius: 12px;
						font-size: 12px;
						font-weight: 600;
						
						&.score-excellent {
							background: #f6ffed;
							color: #52c41a;
						}
						
						&.score-good {
							background: #e6f7ff;
							color: #1890ff;
						}
						
						&.score-fair {
							background: #fff7e6;
							color: #fa8c16;
						}
						
						&.score-poor {
							background: #fff2f0;
							color: #ff4d4f;
						}
					}
				}
				
				.phase-duration {
					font-size: 12px;
					color: #666;
					margin-bottom: 8px;
					display: block;
				}
				
				.phase-improvements {
					.improvement-item {
						background: white;
				border-radius: 6px;
						padding: 8px;
						margin-bottom: 6px;
						border-left: 2px solid #52c41a;
						
						.improvement-text {
							font-size: 13px;
							color: #333;
							line-height: 1.4;
						}
					}
				}
			}
		}
		
		// 关节详细分析样式
		.joint-analysis {
			margin-bottom: 20px;
			
			.section-subtitle {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin-bottom: 15px;
				display: block;
			}
			
			.joint-item {
				background: white;
				border-radius: 12px;
				padding: 16px;
				margin-bottom: 12px;
				box-shadow: 0 2px 8px rgba(0,0,0,0.08);
				border-left: 4px solid #722ed1;
				
				.joint-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;
					
					.joint-name {
						font-size: 15px;
						font-weight: 600;
						color: #333;
					}
					
					.risk-indicator {
						padding: 4px 8px;
						border-radius: 12px;
						font-size: 11px;
						font-weight: 600;
						
						&.risk-low {
							background: #f6ffed;
							color: #52c41a;
						}
						
						&.risk-medium {
							background: #fff7e6;
							color: #fa8c16;
						}
						
						&.risk-high {
							background: #fff2f0;
							color: #ff4d4f;
						}
					}
				}
				
				.joint-metrics {
		display: flex;
					flex-direction: column;
					gap: 6px;
					margin-bottom: 12px;
					
					.metric-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.metric-label {
							font-size: 13px;
							color: #666;
						}
						
						.metric-value {
							font-size: 13px;
							font-weight: 600;
							color: #1890ff;
						}
					}
				}
				
				.joint-advice {
					background: #f0f2ff;
					border-radius: 8px;
					padding: 12px;
					
					.advice-title {
						font-size: 12px;
						font-weight: 600;
						color: #722ed1;
						margin-bottom: 6px;
						display: block;
					}
					
					.advice-item {
						font-size: 12px;
						color: #333;
						line-height: 1.5;
						margin-bottom: 4px;
						display: block;
						
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
		
		// 生物力学分析样式
		.biomechanics {
			margin-bottom: 20px;
			
			.section-subtitle {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin-bottom: 15px;
				display: block;
			}
			
			.biomech-item {
				background: #f0f9ff;
				border-radius: 12px;
		padding: 16px;
				margin-bottom: 12px;
				border-left: 4px solid #13c2c2;
				
				.biomech-title {
					font-size: 14px;
					font-weight: 600;
					color: #333;
					margin-bottom: 10px;
					display: block;
				}
				
				.biomech-metrics {
					display: flex;
					flex-direction: column;
					gap: 6px;
					
					.biomech-metric {
						font-size: 13px;
						color: #333;
						background: white;
						padding: 6px 10px;
			border-radius: 6px;
						display: block;
					}
				}
			}
		}
		
		// 训练计划样式
		.training-plan {
			margin-bottom: 20px;
			
			.section-subtitle {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin-bottom: 15px;
				display: block;
			}
			
			.plan-goals, .plan-schedule {
				background: white;
				border-radius: 12px;
				padding: 16px;
				margin-bottom: 12px;
				box-shadow: 0 2px 8px rgba(0,0,0,0.08);
			}
			
			.plan-goals {
				border-left: 4px solid #52c41a;
			}
			
			.plan-schedule {
				border-left: 4px solid #fa8c16;
			}
			
			.goals-title, .schedule-title {
			font-size: 14px;
				font-weight: 600;
				color: #333;
				margin-bottom: 10px;
				display: block;
			}
			
			.goal-item {
				font-size: 13px;
				color: #333;
				line-height: 1.5;
				margin-bottom: 6px;
				display: block;
			}
			
			.schedule-item {
				margin-bottom: 8px;
				
				.day-title {
					font-size: 13px;
					font-weight: 600;
					color: #fa8c16;
					margin-right: 8px;
				}
				
				.day-activities {
					font-size: 13px;
					color: #333;
					line-height: 1.4;
				}
			}
		}
		
		.analysis-metrics {
			.metric-item {
				background: #f8f9fa;
				border-radius: 8px;
				padding: 15px;
				margin-bottom: 12px;
				
				.metric-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;
					
					.metric-name {
						font-size: 14px;
						font-weight: 500;
						color: #333;
					}
					
					.metric-score {
						padding: 4px 8px;
						border-radius: 12px;
						font-size: 12px;
						font-weight: bold;
						
						&.score-excellent {
							background: #f6ffed;
							color: #52c41a;
						}
						
						&.score-good {
							background: #e6f7ff;
							color: #1890ff;
						}
						
						&.score-fair {
							background: #fff7e6;
							color: #fa8c16;
						}
						
						&.score-poor {
							background: #fff2f0;
							color: #ff4d4f;
						}
					}
				}
				
				.metric-progress {
					margin-bottom: 8px;
					
					.progress-bar {
						width: 100%;
						height: 6px;
				background: #f0f0f0;
						border-radius: 3px;
						overflow: hidden;
						
						.progress-fill {
							height: 100%;
							background: linear-gradient(90deg, #667eea, #764ba2);
							border-radius: 3px;
							transition: width 0.3s ease;
						}
					}
				}
				
				.metric-comment {
					font-size: 12px;
				color: #666;
					line-height: 1.4;
				}
			}
		}
		
		.analysis-issues {
			margin-top: 20px;
			
			.issues-title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin-bottom: 15px;
				display: block;
			}
			
			.issue-item {
				display: flex;
				gap: 12px;
				background: #fff2f0;
				border-radius: 8px;
				padding: 15px;
				margin-bottom: 10px;
				border-left: 4px solid #ff4d4f;
				
				.issue-severity {
					width: 24px;
					height: 24px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					
					&.severity-high {
						background: #ff4d4f;
					}
					
					&.severity-medium {
						background: #fa8c16;
					}
					
					&.severity-low {
						background: #faad14;
					}
				}
				
				.issue-content {
					flex: 1;
					
					.issue-title {
						font-size: 14px;
						font-weight: 500;
						color: #333;
						display: block;
						margin-bottom: 4px;
					}
					
					.issue-description {
						font-size: 13px;
						color: #666;
						line-height: 1.5;
						margin-bottom: 6px;
					}
					
					.issue-suggestion {
						font-size: 12px;
						color: #1890ff;
						background: #e6f7ff;
						padding: 6px 10px;
						border-radius: 6px;
						display: block;
					}
				}
			}
		}
		
		.analysis-improvements {
			margin-top: 20px;
			
			.improvements-title {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				margin-bottom: 15px;
				display: block;
			}
			
			.improvement-item {
				display: flex;
				gap: 12px;
				background: #f6ffed;
				border-radius: 8px;
				padding: 15px;
				margin-bottom: 10px;
				border-left: 4px solid #52c41a;
				
				.improvement-icon {
					width: 24px;
					height: 24px;
					border-radius: 50%;
					background: #52c41a;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
				}
				
				.improvement-content {
					flex: 1;
					
					.improvement-text {
						font-size: 13px;
						color: #333;
						line-height: 1.5;
						margin-bottom: 4px;
					}
					
					.improvement-priority {
						font-size: 11px;
						color: #52c41a;
						background: rgba(82, 196, 26, 0.1);
						padding: 2px 6px;
						border-radius: 4px;
					}
				}
			}
		}
	}
}

// AI对话框样式
.ai-conversation-section {
	background: white;
	margin: 15px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	
	.conversation-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px;
		border-bottom: 1px solid #f0f0f0;
		
		.conversation-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			display: flex;
			align-items: center;
			gap: 8px;
			
			.message-count {
				font-size: 12px;
				color: #999;
				font-weight: normal;
			}
			
			.conversation-status {
				font-size: 12px;
				color: #52c41a;
				font-weight: bold;
				margin-left: 4px;
			}
		}
		
		.full-chat-btn {
			background: none;
			border: none;
			color: #667eea;
			font-size: 13px;
			display: flex;
			align-items: center;
			gap: 4px;
			padding: 6px 12px;
			border-radius: 6px;
			transition: all 0.2s;
			
			&:active {
				background: #f0f2ff;
			}
			
			.full-chat-text {
				font-size: 13px;
			}
		}
	}
	
	.conversation-container {
		padding: 16px;
		
		.conversation-messages {
			height: 140px;
			overflow-y: auto;
			overflow-x: hidden;
			margin-bottom: 12px;
			padding: 8px 4px;
			border-radius: 8px;
			background: #fafafa;
			
			// 自定义滚动条样式
			&::-webkit-scrollbar {
				width: 4px;
			}
			
			&::-webkit-scrollbar-track {
				background: transparent;
			}
			
			&::-webkit-scrollbar-thumb {
				background: #ddd;
				border-radius: 2px;
				
				&:hover {
					background: #ccc;
				}
			}
			

			
			.message-item {
				display: flex;
				margin-bottom: 10px;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				&.user {
					justify-content: flex-end;
					
					.message-content {
				background: #667eea;
				color: white;
						border-radius: 16px 16px 4px 16px;
						padding: 8px 12px;
						max-width: 75%;
						
						.message-text {
							font-size: 13px;
							line-height: 1.4;
							word-wrap: break-word;
						}
						
						.message-time {
							font-size: 10px;
							opacity: 0.8;
							margin-top: 3px;
							display: block;
						}
					}
				}
				
				&.ai {
					justify-content: flex-start;
					
					.message-avatar {
						width: 24px;
						height: 24px;
						background: #f0f2ff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 6px;
						flex-shrink: 0;
						margin-top: 2px;
					}
					
					.message-content {
						background: #f8f9fa;
						color: #333;
						border-radius: 16px 16px 16px 4px;
			padding: 8px 12px;
						max-width: 75%;
						
						.message-text {
							font-size: 13px;
							line-height: 1.5;
							word-wrap: break-word;
						}
						
						.message-time {
							font-size: 10px;
							color: #999;
							margin-top: 3px;
							display: block;
						}
					}
				}
			}
			
			.typing-indicator {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-left: 36px;
				
				.typing-dots {
					display: flex;
					gap: 4px;
					
					.dot {
						width: 6px;
						height: 6px;
						background: #ccc;
						border-radius: 50%;
						animation: typing 1.4s infinite ease-in-out;
						
						&:nth-child(1) { animation-delay: -0.32s; }
						&:nth-child(2) { animation-delay: -0.16s; }
					}
				}
			}
		}
		
		.conversation-input-container {
			display: flex;
			gap: 8px;
			align-items: center;
			
			.conversation-input {
				flex: 1;
				padding: 10px 14px;
				border: 1px solid #e9ecef;
				border-radius: 20px;
			font-size: 14px;
				background: #f8f9fa;
				
				&:focus {
					outline: none;
					border-color: #667eea;
					background: white;
				}
			}
			
			.send-button {
				width: 36px;
				height: 36px;
				background: #667eea;
				border: none;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s;
				
				&:active {
					transform: scale(0.95);
				}
				
				&:disabled {
					background: #ccc;
					transform: none;
				}
			}
		}
	}
}

// 美化建议样式
.suggestions-section {
	.suggestions-container {
		.suggestion-item {
			background: white;
			border-radius: 12px;
			padding: 16px;
			margin-bottom: 12px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.08);
			border: 1px solid #f0f0f0;
			transition: all 0.3s ease;
			
			&:hover {
				box-shadow: 0 4px 16px rgba(0,0,0,0.12);
				transform: translateY(-1px);
			}
			
			&.suggestion-correction {
				border-left: 4px solid #ff4d4f;
			}
			
			&.suggestion-drill {
				border-left: 4px solid #52c41a;
			}
			
			&.suggestion-improvement {
				border-left: 4px solid #1890ff;
			}
			
			.suggestion-header {
		display: flex;
				align-items: center;
		gap: 12px;
				margin-bottom: 12px;
				
				.suggestion-icon {
					width: 32px;
					height: 32px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					
					&.icon-correction {
						background: linear-gradient(135deg, #ff4d4f, #ff7875);
					}
					
					&.icon-drill {
						background: linear-gradient(135deg, #52c41a, #73d13d);
					}
					
					&.icon-improvement {
						background: linear-gradient(135deg, #1890ff, #40a9ff);
					}
					
					&.icon-general {
						background: linear-gradient(135deg, #667eea, #764ba2);
					}
				}
				
				.suggestion-title-area {
			flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.suggestion-type {
						font-size: 15px;
						font-weight: 600;
						color: #333;
					}
					
					.suggestion-priority {
						padding: 4px 8px;
						border-radius: 12px;
						font-size: 11px;
						font-weight: 500;
						
						&.priority-high {
							background: #fff2f0;
							color: #ff4d4f;
							border: 1px solid #ffccc7;
						}
						
						&.priority-medium {
							background: #fff7e6;
							color: #fa8c16;
							border: 1px solid #ffd591;
						}
						
						&.priority-low {
							background: #f6ffed;
							color: #52c41a;
							border: 1px solid #b7eb8f;
						}
					}
				}
			}
			
			.suggestion-content {
				.suggestion-text {
			font-size: 14px;
					color: #333;
					line-height: 1.6;
					margin-bottom: 12px;
					display: block;
				}
				
				.suggestion-issue, .suggestion-improvement {
					background: #f8f9fa;
					border-radius: 8px;
					padding: 10px;
					margin-bottom: 8px;
					
					.issue-label, .improvement-label {
						font-size: 12px;
						font-weight: 600;
				color: #666;
						margin-bottom: 4px;
						display: block;
					}
					
					.issue-text, .improvement-text {
						font-size: 13px;
						color: #333;
						line-height: 1.5;
					}
				}
				
				.drill-details {
					background: #f0f9ff;
					border-radius: 8px;
					padding: 12px;
					margin-bottom: 8px;
					
					.drill-info {
						display: flex;
						flex-wrap: wrap;
						gap: 12px;
						margin-bottom: 8px;
						
						.drill-item {
							display: flex;
							align-items: center;
							gap: 4px;
							
							.drill-label {
								font-size: 12px;
								color: #666;
								font-weight: 500;
							}
							
							.drill-value {
								font-size: 12px;
								color: #1890ff;
								font-weight: 600;
								background: white;
								padding: 2px 6px;
								border-radius: 4px;
							}
						}
					}
					
					.target-area {
						display: flex;
						align-items: center;
						gap: 6px;
						
						.target-label {
							font-size: 12px;
							color: #666;
							font-weight: 500;
						}
						
						.target-text {
							font-size: 12px;
							color: #1890ff;
							font-weight: 600;
						}
					}
				}
				
				.adjustment-steps {
					background: #f9f0ff;
					border-radius: 8px;
					padding: 12px;
					margin-bottom: 8px;
					
					.steps-label {
						font-size: 12px;
						font-weight: 600;
						color: #666;
						margin-bottom: 8px;
						display: block;
					}
					
					.step-item {
						padding: 6px 0;
						border-bottom: 1px solid #f0f0f0;
						
						&:last-child {
							border-bottom: none;
						}
						
						.step-text {
							font-size: 13px;
							color: #333;
							line-height: 1.4;
						}
					}
				}
				
				.timeframe {
					display: flex;
					align-items: center;
					gap: 6px;
					
					.timeframe-label {
						font-size: 12px;
						color: #666;
						font-weight: 500;
					}
					
					.timeframe-text {
						font-size: 12px;
						color: #52c41a;
						font-weight: 600;
						background: #f6ffed;
						padding: 2px 6px;
						border-radius: 4px;
					}
				}
			}
			
			.suggestion-footer {
				margin-top: 12px;
				padding-top: 8px;
				border-top: 1px solid #f0f0f0;
				display: flex;
				gap: 12px;
				
				.suggestion-meta {
					font-size: 11px;
					color: #999;
					background: #f8f9fa;
					padding: 2px 6px;
					border-radius: 4px;
				}
			}
		}
	}
}

@keyframes typing {
	0%, 60%, 100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-10px);
		}
	}

</style>
